<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.jstree.js"></script>
<script type="text/javascript">
	$(function() {
		$('#categoryTree').jstree();
	});

	var unfold = function() {
		var $li = $(this);
		var url = '${pageContext.request.contextPath}/category/list';
		var data = {
			parentNo : $li.val()
		};
		var success = function(data) {
			if (data.length > 0)
				var ul = $('<ul>');

			for ( var i = 0; i < data.length; i++) {
				var li = $('<li>');
				li.text(data[i].name);
				li.val(data[i].categoryNo);
				li.click(unfold);
				ul.append(li);
			}
			$li.append(ul);
		}
		$.post(url, data, success, 'json');
	}
</script>
<ul>
	<li class="folder" value="0">+ root</li>
</ul>

<input type="button" class="button" value="toggle_node" id="toggle_node" style="clear: both;" />
<div id="demo1" class="demo">
	<ul>
		<li id="phtml_1"><a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2"><a href="#">Child node 1</a></li>
				<li id="phtml_3"><a href="#">Child node 2</a></li>
			</ul>
		</li>
		<li id="phtml_4"><a href="#">Root node 2</a></li>
	</ul>
</div>

<script type="text/javascript" class="source">
	$(function() {
		$("#toggle_node").click(function() {
			$("#demo1").jstree("toggle_node", "#phtml_1");
		});
				
		$("#demo1").jstree({
			"plugins" : [ "themes", "html_data" ]
		});
	});
</script>
